<template>
	<div>
		<div class='prizeDrawSpace'>

		</div>
		<div class="prizeDraw">

			<div class="prizeDraw_top">
				<div class="prizeDraw_top_close">
					抽奖 <image src="@/static/image/close.png" mode="" @click="closeDialog()"></image>
				</div>
				<scroll-view @scrolltolower="scrolltolower" :style="{ height: scrollViewHeight + 'rpx' }" :scroll-y="true"
					:scroll-with-animation="true">
					<div class="prizeDraw_items" v-for="(ite, idx) in prizeList" :key="idx">
						<div class="prizeDraw_items_top">
							<div
								:class="ite.status != 1 ? 'prizeDraw_items_top_lable prizeDraw_items_top_lable_hui' : 'prizeDraw_items_top_lable'">
								{{ ite.status == 1 ? '进行中' : '已结束' }}
							</div>
							<div class="prizeDraw_items_top_text ex">
								{{ ite.name }}
							</div>
						</div>
						<div class="prizeDraw_items_cont">
							<div class="prizeDraw_items_cont_items">
								<div class="prizeDraw_items_cont_items_left">
									活动奖品：<div class="prizeDraw_items_cont_items_cont ex">{{ ite.jpname }}</div>
								</div>
								<div class="prizeDraw_items_cont_items_right">
									奖品数量：<div class="prizeDraw_items_cont_items_conts">{{ ite.prizeNum }}</div>
								</div>
							</div>
							<div class="prizeDraw_items_cont_items">
								<div class="prizeDraw_items_cont_items_left">
									参与条件：<div class="prizeDraw_items_cont_items_cont ex">
										{{ ite.contactType | prizeTypeFilter }}
									</div>
								</div>
								<div class="prizeDraw_items_cont_items_right">
									参与人数：<div class="prizeDraw_items_cont_items_conts">{{ ite.joinUserNum }}</div>
								</div>
							</div>
							<div class="prizeDraw_items_cont_items ">
								<div> 开奖时间：<span class="color_hui">{{ ite.publishTime }}</span> </div>
							</div>
						</div>

						<div class="prizeDraw_items_btn">
							<div :class="ite.startTime == 2 ? 'prizeDraw_items_btn_act prizeDraw_items_btn_acts' : 'prizeDraw_items_btn_act'"
								@click='openPrize(ite, idx)' v-if="ite.status == 1">
								{{ ite.startTime == 2 ? '开奖中' : '立即开奖' }}<span v-if='ite.startTime == 2'>({{ ite.zzjTime
								}})</span>
							</div>

							<div class="prizeDraw_items_btn_textTwo" v-if="ite.status == 2"
								@click='winnersEvemt(ite)'>
								中奖名单
							</div>

							<div class="prizeDraw_items_btn_text" @click='deleteEvent(ite, idx)'>
								移除
							</div>
						</div>

					</div>
					<div class="zj_space">

					</div>
					<div class="listSpace" v-if="prizeList.length <= 0 && loading">
						<list-space></list-space>
					</div>
				</scroll-view>
			</div>
		</div>

	</div>
</template>

<script>
export default {
	filters: {
		prizeTypeFilter(v) {
			// 评论口令 购买直播间商品 邀请用户观 看时长
			var s = ''
			switch (v) {
				case 1:
					s = '评论口令'
					break;
				case 2:
					s = '购买直播间商品'
					break;
				case 3:
					s = '邀请用户观'
					break;
				case 4:
					s = '看时长'
					break;
			}
			return s
		}
	},
	data() {
		return {
			params: {
				page: 1,
				pageSize: 10,
				notBind: 0,
				status: 0,
				liveId: '1777987123102617600'
			},
			prizeList: [],
			scrollViewHeight: 892,
			total: 0,
			loading: false,
			liveId: ''
		}
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.params.liveId = opt.liveId || this.liveId
		}
		this.getPrize()

	},
	onPullDownRefresh() {
		this.params.page = 1
		this.prizeList = []
		this.loading = false
		this.getPrize()
	},
	methods: {
		closeDialog() {
			this.$utils.closeDialog(this)
			// uni.navigateBack()
		},
		// 开奖
		openPrize(ite, idx) {
			uni.showModal({
				title: '提示',
				content: '点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？',
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						// drawActivityId: "1801106215296569344"
						const {
							data
						} = await this.$request(this.$Api.drawHandle, {
							drawActivityId: ite.drawActivityId
						}, "POST")
						if (data.code !== 200) return
						// 执行倒计时
						this.openTime(idx)
					}
				}
			})
		},
		// 删除后不可恢复，不可查看活动信息，是否要删除活动
		deleteEvent(ite, idx) {
			uni.showModal({
				title: '提示',
				content: '删除后不可恢复，不可查看活动信息，是否要删除活动？',
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						// drawActivityId: "1801106215296569344"
						const {
							data
						} = await this.$request(this.$Api.deleteActivity, {
							drawActivityId: ite.drawActivityId
						}, "POST")
						if (data.code !== 200) return
						// 执行软删除
						this.prizeList.splice(idx, 1)
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})

					}
				}
			})
		},
		openTime(idx) {
			this.$set(this.prizeList[idx], 'startTime', 2)
			var time = 10
			this.$set(this.prizeList[idx], 'zzjTime', 10)
			var timer = setInterval((res) => {
				time--
				console.log('111111111', time)
				this.$set(this.prizeList[idx], 'zzjTime', time)
				if (time <= 0) {
					clearInterval(timer)
					this.$set(this.prizeList[idx], 'startTime', 1)
					this.prizeList[idx].status = 2
				}
			}, 1000)
		},
		// 点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？
		scrolltolower(e) {
			if (this.prizeList.length < this.total) {
				this.params.page++
				this.getPrize()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
			console.log('e.detail.scrollTop', e.detail.scrollTop)
		},
		async getPrize() {
			const {
				data
			} = await this.$request(this.$Api.drawList, this.params, "get")
			if (data.code != 200) return
			this.loading = true
			if (!data.data.list) return
			for (var i in data.data.list) {
				data.data.list[i].jpname = ''
				for (var k in data.data.list[i].prizeList) {
					data.data.list[i].jpname += data.data.list[i].prizeList[k].name + (k == data.data.list[i]
						.prizeList.length - 1 ? '' : ',')
				}

			}
			this.prizeList = this.prizeList.concat(data.data.list)
			this.total = data.data.total
			uni.stopPullDownRefresh()
		},
		// 中奖名单
		winnersEvemt(ite) {
			uni.navigateTo({
				url: '/pages/prizeDraw/prizeDetail?drawActivityId=' + ite.drawActivityId + "&checkType=" + ite
					.checkType + '&activtName=' +ite.name
			})
		},
		backEvent() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss">
.prizeDraw {
	width: 100%;
	height: 992rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	overflow-y: hidden;
	// position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 32rpx;
	box-sizing: border-box;


	.prizeDraw_top {
		width: 100%;
		height: 100rpx;
		position: relative;
		text-align: center;
		font-size: 32rpx;
		line-height: 100rpx;


		image {
			position: absolute;
			right: 0;
			top: 32rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}

	.prizeDraw_items {
		width: 686rpx;
		height: 340rpx;
		background: #F6F9FF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;

		.prizeDraw_items_top {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0 16rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #D7DDE4;

			.prizeDraw_items_top_lable {
				width: 104rpx;
				height: 46rpx;
				background: #00C795;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: 24rpx;
				text-align: center;
				line-height: 46rpx;
				margin-right: 18rpx;
				color: #fff;
			}

			.prizeDraw_items_top_lable_hui {
				background: #BFBFBF;
			}

			.prizeDraw_items_top_text {
				width: 476rpx;
				height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #464C5B;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.prizeDraw_items_cont {
			font-size: 24rpx;
			color: #8C8C8C;
			padding: 0 16rpx;
			box-sizing: border-box;

			.prizeDraw_items_cont_items {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40rpx;
				margin-top: 20rpx;

				.prizeDraw_items_cont_items_left {
					width: 368rpx;
					display: flex;
					align-items: center;

					.prizeDraw_items_cont_items_cont {
						width: 220rpx;
						color: #464C5B;
						text-align: left;
					}
				}

				.prizeDraw_items_cont_items_right {
					width: 305rpx;
					text-align: right;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding-left: 80rpx;

					.prizeDraw_items_cont_items_conts {
						color: #464C5B;
					}
				}

			}

			.color_hui {
				color: #464C5B;

			}
		}

		.prizeDraw_items_btn {
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 36rpx;
			box-sizing: border-box;
			margin-top: 10rpx;

			.prizeDraw_items_btn_act {
				min-width: 158rpx;
				height: 48rpx;
				background: #295EFF;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 48rpx;

				span {
					margin-left: 10rpx;
				}
			}

			.prizeDraw_items_btn_acts {
				opacity: 0.5;
			}

			.prizeDraw_items_btn_text {
				width: 52rpx;
				height: 48rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #295EFF;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				margin-left: 50rpx;
			}

			.prizeDraw_items_btn_textTwo {
				width: 104rpx;
				height: 48rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #295EFF;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				width: 158rpx;
				height: 48rpx;
				border-radius: 8rpx;
				border: 2rpx solid #295EFF;
			}

		}

	}
}
</style>